<template>
  <div class="box">
    <div class="intro">
      <div class="pic"><img v-lazy="info.coverImgUrl" alt="" /></div>
      <div id="intro">
        <h1 class="title">{{ info.name }}</h1>
        <div class="desc">{{ info.description }}</div>
        <div class="category">
          <span v-for="(c, i) in info.tagList" :key="i">#{{ c }}</span>
        </div>
        <div class="other">
          <div class="play">
            <i class="iconfont icon-bofang"></i><span @click="playSongAll">播放全部</span>
          </div>
          <div class="collect">
            <i class="iconfont icon-shoucang"></i><span>收藏</span>
          </div>
          <div class="share">
            <i class="iconfont icon-fenxiang"></i><span>分享</span>
          </div>
        </div>
      </div>
    </div>
    <div class="songList">
      <h1>全部歌曲</h1>
      <div class="list">
        <div class="name">
          <span class="id">序号</span>
          <span class="song">歌曲</span>
          <span class="singer">歌手</span>
          <span class="album">专辑</span>
          <span class="time">时长</span>
        </div>
        <div class="song" v-for="(l, i) in info.tracks" :key="i">
          <span class="id">{{ i + 1 }}</span>
          <span class="song" @click="playSong(l)"
            >{{ l.name }} <span class="vip" v-show="l.isVip == 1">VIP</span>
          </span>
          <span class="singer">
            <span v-for="(art, j) in l.ar" :key="j">{{ art.name }}</span>
          </span>
          <span class="album">《{{ l.al.name }}》</span>
          <span class="time">{{ getTime(l.dt) }}</span>
        </div>
      </div>
    </div>
    <aplayer :audio="audio" :lrcType="1"  ref="aplayer"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      abc:[],
      playAll:[],
      info: '',
      time: null,
      songUrl: '',
      audio: [{
        name: '东西（Cover：林俊呈）',
        artist: '纳豆',
        url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
        cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
        lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
      }],
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getInfo(to.params.id)
    })
  },
  beforeRouteUpdate(to, from, next) {
    this.getInfo(this.$route.params.id)
    next()
  },
  methods: {
    getTime(time) {
      var m = Math.floor(time / 60000)
      var minute = m > 10 ? m : '0' + m
      var second =
        time - 60000 * m >= 10 ? time - 60000 * m : '0' + (time - 60000 * m)
      second = second.toString().slice(0, 2) //  将数字转换成 字符串截取 前两位数字
      return minute + ':' + second
    },
    getInfo(id) {
      this.axios
        .get(`https://autumnfish.cn/playlist/detail?id=${id}`)
        .then((res) => {
          console.log(res)
          this.playAll = res.data.privileges.map((item)=>{
            return item.id
          })
          this.playAll = this.playAll.toString()
          this.info = res.data.playlist
          console.log(this.info)
        })
    },
    playSong(songInfo) {
      var songUrl = ''
      let songId = songInfo.id
      console.log(songId);
      let url = `https://autumnfish.cn/song/url?id=${songId}`
      let lrcUrl = `https://autumnfish.cn/lyric?id=${songId}`
      this.axios.get(url).then((res) => {
        songUrl = res.data.data[0].url
        this.axios.get(lrcUrl).then((res) => {
            let songLrc = ''
            if(res.data.nolyric){
                  songLrc=''
            }else {
                  songLrc = res.data.lrc.lyric
            }
          this.audio = {
            name: songInfo.name,
            artist: songInfo.ar[0],
            url: songUrl,
            cover: songInfo.al.picUrl, // prettier-ignore
            lrc: songLrc,
          }
        })
      })
      this.$refs.aplayer.play();
    },
    playSongAll(){
       let url = `https://autumnfish.cn/song/url?id=${this.playAll}`
      let Alllrc = this.playAll.split(',').map((item)=>{
        console.log(item);
         let lrcUrl = `https://autumnfish.cn/lyric?id=${item}`
           this.axios.get(lrcUrl).then((res) => {
            if(res.data.nolyric){
                 var  songLrc=''
            }else {
                  var songLrc = res.data.lrc.lyric
            } 
           this.abc.push(songLrc)
         
           })
         
      })  
        this.axios.get(url).then((res) => {
        let all = res.data.data.map((item)=>{
          return {
            url: item.url,
          }
        })
        all.map((item,index)=>{
          item.name = this.info.tracks[index].name
          item.artist = this.info.tracks[index].ar[0].name
          item.cover = this.info.tracks[index].al.picUrl
          item.lrc = this.abc[index]
        })
        this.audio = all
      })
    }
  },
}
</script>

<style scoped>
.box {
  width: 80vw;
  margin: 30px auto;
}
.intro {
  display: flex;
  justify-content: space-between;
}
.intro .pic img {
  width: 270px;
  height: 270px;
}
#intro {
  width: 58vw;
  position: relative;
}
#intro .desc {
  color: #606266;
  padding: 16px 0 24px 0;
}
#intro .category span {
  color: red;
  margin-right: 10px;
}
#intro .other {
  display: flex;
  width: 30vw;
  position: absolute;
  bottom: 20px;
}
.other div {
  background-color: #f8f8f8;
  padding: 10px 26px;
  border-radius: 20px;
  margin-right: 20px;
}
.other .play {
  background-color: red;
}
.other i {
  margin-right: 6px;
  font-size: 20px;
}
.other .play i {
  color: #fff;
  font-size: 16px;
}
.other div span {
  color: #606266;
  cursor: pointer;
}
.other .play span {
  color: #fff;
}
.songList h1 {
  font-weight: normal;
  margin: 50px 0 30px 0;
}

.songList .list .song .singer span.add::after {
  content: '/';
  font-weight: bold;
  display: inline-block;
  font-size: 20px;
  padding: 0 6px;
  position: relative;
  top: 1px;
}

.songList .list {
  display: flex;
  flex-direction: column;
}
.songList .list div.song:hover {
  background-color: #e8e9ed;
}
.songList .list div.song .song:hover,
.songList .list div.song .singer span:hover,
.songList .list div.song .album:hover {
  color: red;
}
.songList .list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.songList .list div {
  padding: 15px 10px;
  display: flex;
  cursor: pointer;
  position: relative;
}

.songList .list div span {
  display: inline-block;
}
.songList .list div .id {
  width: 5%;
}
.songList .list div .song {
  width: 30%;
}
.songList .list div .singer {
  width: 26%;
  padding-left: 20px;
}
.songList .list div .singer span {
  width: 90%;
}
.songList .list div .album {
  width: 26%;
}
.songList .list div .time {
  width: 9%;
  position: absolute;
  right: 10px;
}

.songList .list .song span {
  color: #303133;
}

.songList .list div .vip {
  background: #af9c7c;
  color: #fff;
  padding: 0 3px;
  border-radius: 3px;
  margin-left: 6px;
  font-size: 12px;
}
.songList .list .name {
  color: #909399;
}
.songList .list div:nth-child(2n + 1) {
  background-color: #f7f7f7;
}
</style>
